<script setup>
import { useStore } from 'vuex';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const store = useStore()

const modelSelected = ref(store.state.model)
const modelList = ref([
    "ChatGLM3-6B",
    "ZhipuAI"
])

const temperature = ref(store.state.temperature)

function setLLMParam() {
    store.commit("updateModel", modelSelected.value)
    store.commit("updateTemperature", temperature.value)
    ElMessage.success("设置成功！")
}

</script>
<template>
    <div id="outer">
        <div id="form-content">
            <el-form-item label="模型选择">
                <el-select v-model="modelSelected">
                    <el-option v-for="model in modelList" :key="model" :value="model" />
                </el-select>
            </el-form-item>

            <el-form-item label="温度参数">
                <el-tooltip effct="dark" content="温度参数取值0.1到1，数值越高模型创造性越高，生成的答案更加多样。">
                    <el-input-number v-model="temperature" :min="0.1" :step="0.1" :max="1.0" />
                </el-tooltip>
            </el-form-item>

            <div style="width: 100%;margin-top: 3em; display: flex;justify-content: flex-end;">
                <el-button type="info" @click="setLLMParam"> 设置</el-button>
            </div>
        </div>

    </div>
</template>
<style scoped>
#outer {
    margin: auto;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

#form-content {
    height: 50%;
    width: 50%;
}
</style>